<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选框应用</title>
    <style type="text/css">

        BODY {
            font-size: 12px;
            margin: 0px 0px 0px 0px;
            overflow-x: auto;
            overflow-y: auto;
            background-color: #B8D3F4;
        }

        .default_input {
            border: 1px solid #666666;
            height: 18px;
            font-size: 12px;
        }

        .default_input2 {
            border: 1px solid #666666;
            height: 18px;
            font-size: 12px;
        }

        .nowrite_input {
            border: 1px solid #849EB5;
            height: 18px;
            font-size: 12px;
            background-color: #EBEAE7;
            color: #9E9A9E;
        }

        .default_list {
            font-size: 12px;
            border: 1px solid #849EB5;
        }

        .default_textarea {
            font-size: 12px;
            border: 1px solid #849EB5;
        }

        .nowrite_textarea {
            border: 1px solid #849EB5;
            font-size: 12px;
            background-color: #EBEAE7;
            color: #9E9A9E;
        }

        .wordtd5 {
            font-size: 12px;
            text-align: center;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #b8c4f4;
        }

        .wordtd {
            font-size: 12px;
            text-align: left;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #b8c4f4;
        }

        .wordtd_1 {
            font-size: 12px;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #516CD6;
            color: #fff;
        }

        .wordtd_2 {
            font-size: 12px;
            text-align: right;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #64BDF9;
        }

        .wordtd_3 {
            font-size: 12px;
            text-align: right;
            vertical-align: top;
            padding-top: 6px;
            padding-right: 5px;
            padding-bottom: 3px;
            padding-left: 5px;
            background-color: #F1DD34;
        }

        .inputtd {
            font-size: 12px;
            vertical-align: top;
            padding-top: 3px;
            padding-right: 3px;
            padding-bottom: 3px;
            padding-left: 3px;
        }

        .inputtd2 {
            text-align: center;
            font-size: 12px;
            vertical-align: top;
            padding-top: 3px;
            padding-right: 3px;
            padding-bottom: 3px;
            padding-left: 3px;
        }

        .tablebg {
            font-size: 12px;
        }

        .tb {
            border-collapse: collapse;
            border: 1px outset #999999;
            background-color: #FFFFFF;
        }

        .td2 {
            line-height: 22px;
            text-align: center;
            background-color: #F6F6F6;
        }

        .td3 {
            background-color: #B8D3F4;
            text-align: center;
            line-height: 20px;
            width: 100px;
        }

        .td4 {
            background-color: #F6F6F6;
            line-height: 20px;
        }

        .td5 {
            border: #000000 solid;
            border-right-width: 0px;
            border-left-width: 0px;
            border-top-width: 0px;
            border-bottom-width: 1px;
        }

        .tb td {
            font-size: 12px;
            border: 2px groove #ffffff;
        }


        .noborder {
            border: none;
        }

        .button {
            border: 1px ridge #ffffff;
            line-height: 18px;
            height: 20px;
            width: 45px;
            padding-top: 0px;
            background: #CBDAF7;
            color: #000000;
            font-size: 9pt;
        }

        .textarea {
            font-family: Arial, Helvetica, sans-serif, "??";
            font-size: 9pt;
            color: #000000;
            border-bottom-width: 1px;
            border-top-style: none;
            border-right-style: none;
            border-bottom-style: solid;
            border-left-style: none;
            border-bottom-color: #000000;
            background-color: transparent;
            text-align: left
        }
    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        //关于页面加载完毕后, 触发的方法 的几种写法
        //1. js 的原生方式
        // window.onload = function () {
        //     alert("页面加载完毕后。。")
        // }
        //2.方式 jquery方式
        // $(document).ready(function () {
        //     alert("页面加载完毕后。。方式2")
        // })
        //3. 上面的方式可以简化写法
        $(function () {
            alert("页面加载完毕后。。方式3")
        })

        // $(function (){
        //     //全部移动右边 => 你的编程思维，编程体系 =》 不会自动生成 5,10
        //     //不思考-> 基础 -> 提升 level
        //     //(1) 绑定事件 (2) 选择对应的对象 (3) 处理 插入[内部插入/外部插入]
        //     $("#add_all").click(function () {
        //         //老韩解读: "#first > option" => 层级选择器
        //         //
        //         $("#first > option").appendTo($("#second"));
        //     })
        //
        //     //选中的移到右边
        //     $("#add").click(function () {
        //         //选择对象
        //         $("#first > option:selected").appendTo($("#second"));
        //         //原生 js ->jquery[库, 锋利的js库]-> vue[封装度]
        //     })
        //
        //     //双击移到右边
        //     $("#first").dblclick(function (){
        //         //选择对象 -> 隐式传入 this (dom) -> $(this)jquery.appendTo()
        //         //刚才的错误是因为 $(this) 表示的是 select
        //         $("#first > option:selected").appendTo($("#second"));
        //     })
        //
        //     //全部移动左边
        //     //快速实现, 就是前面的一个反向操作
        //     $("#remove_all").click(function () {
        //         $("#second > option").appendTo($("#first"));
        //     })
        //
        //     //选中的移到左边
        //     $("#remove").click(function () {
        //         //$("#second > option:selected") 层级选择器 > 可以省略
        //         $("#second option:selected").appendTo($("#first"));
        //     })
        //
        //     //双击移到左边
        //     $("#second").dblclick(function () {
        //         $("#second option:selected").appendTo($("#first"));
        //     })
        //
        // })
    </script>
</head>
<body>
<div style="border:1px dashed #E6E6E6;margin:50px 0px 0px 50px; width:350px; height:260px; background-color:#E6E6E6;">
    <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0"
           style="margin:15px 0px 0px 15px;">
        <tr>
            <td width="126">
                <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
                <select name="first" size="10" multiple="multiple" class="td3" id="first">
                    <option value="选项1">选项1</option>
                    <option value="选项2">选项2</option>
                    <option value="选项3">选项3</option>
                    <option value="选项4">选项4</option>
                    <option value="选项5">选项5</option>
                    <option value="选项6">选项6</option>
                    <option value="选项7">选项7</option>
                    <option value="选项8">选项8</option>
                </select>
            </td>
            <td width="69" valign="middle">
                <input name="add" id="add" type="button" class="button" value="-->"/>
                <input name="add_all" id="add_all" type="button" class="button" value="==>"/>
                <input name="remove" id="remove" type="button" class="button" value="&lt;--"/>
                <input name="remove_all" id="remove_all" type="button" class="button" value="&lt;=="/>
            </td>
            <td width="127" align="left">
                <select name="second" size="10" multiple="multiple" class="td3" id="second">
                    <option value="选项9">选项9</option>
                </select>
            </td>
        </tr>
    </table>
</div>
</body>
</html>